<!DOCTYPE html>
<html>
<head>
	<% include link %>
	<link rel="stylesheet" type="text/css" href="/css/select.css">
</head>
<body>
	<% include head %>
	<div class="container" style="min-height:100%;">
		<div style="width:80%;margin:10px auto;" >
			<form  method="get" action="<%-router%>">
				<div class="col-md-4" style="margin-top:10px;">
					<img src="/images/FindLog.png" class="select-findlog-img">
				</div>
				<div class="col-md-6" style="margin-top:10px;">
			  		<input type="text" class="form-control input-lg" value="<%-find%>" name="keyword">
				</div>
				<div class="col-md-2" style="margin-top:10px;"> 
				<button type="submit" class="btn btn-lg btn-info active btn-block">
					<span class="glyphicon glyphicon-search"></span>
					<span class="hidden-md">搜索</span>
				</button>
				</div>
			</form>
		</div>
		<div class="select-find-nav">
			<ul id="myTab" class="nav nav-tabs">
				<li >
					<a href="/select/all?keyword=<%-find%>">
						综合
					</a>
				</li>
				<li>
					<a href="/select/article?keyword=<%-find%>" >
						博客
					</a>
				</li>
				<li>
					<a href="/select/video?keyword=<%-find%>" >
						视频
					</a>
				</li>
				<li>
					<a href="/select/user?keyword=<%-find%>" >
						UP主
					</a>
				</li>
			</ul>
		</div>
		<div style="width:90%;margin:0px auto;">
			<!-- <div class="tab-pane fade in active" id="article-body"> -->
					<% if (router == '/select/user') {%>
						<% include findUsers %>
					<%} else {%> 
						<% include findVA %>
					<%}%>
			<!-- </div> -->
			<div  style="clear:both;width:100%;text-align: center;">
				<ul class="pagination">
				</ul>
			</div>
		</div>
	</div>
	<% include foot %>
<script type="text/javascript">
	init();

	function init() {
		if ('<%-router%>'=='/select/all') {
			$('#myTab ').children().eq(0).addClass("active");
		} else if('<%-router%>'=='/select/article'){
			$('#myTab ').children().eq(1).addClass("active");
		} else if('<%-router%>'=='/select/video'){
			$('#myTab ').children().eq(2).addClass("active");
		} else if('<%-router%>'=='/select/user'){
			$('#myTab ').children().eq(3).addClass("active");
		} 

		fontpage();

	}

	var img_height = ($('.select-find-body-img').width() )*10/16;
	$('.select-find-body-img').css('height',img_height);

	window.onresize=function(){
	img_height = ($('.select-find-body-img').width() )*10/16;
	$('.select-find-body-img').css('height',img_height);
	}

	function fontpage(){
		if($(".pagination")){  
        var pagecount = '<%- count %>';  
        var pagesize = 16;  
        var currentpage = parseInt( '<%- page %>');  
        var counts,pagehtml="";  
        if(pagecount%pagesize==0){  
            counts = parseInt(pagecount/pagesize);  
        }else{  
            counts = parseInt(pagecount/pagesize)+1;  
        }  
 
        if(pagecount<=pagesize){pagehtml="";}  
        
        if(pagecount>pagesize){  
            if(currentpage>1){  
                pagehtml+= '<li><a href="<%-router%>?keyword=<%-find%>&page='+(currentpage-1)+'">«</a></li>';  
            }  
            for(var i=0;i<counts;i++){  
                if(i>=(currentpage-3) && i<(currentpage+3)){  
                    if(i==currentpage-1){  
                        pagehtml+= '<li class="active"><a href="<%-router%>?keyword=<%-find%>&page='+(i+1)+'">'+(i+1)+'</a></li>';  
                    }else{  
                        pagehtml+= '<li><a href="<%-router%>?keyword=<%-find%>&page='+(i+1)+'">'+(i+1)+'</a></li>';  
                    }  
                      
                }  
            }  
            if(currentpage<counts){  
                pagehtml+= '<li><a href="<%-router%>?keyword=<%-find%>&page='+(currentpage+1)+'">»</a></li>';  
            }  
        }  
        $(".pagination").html(pagehtml);  
    }  
	}
	
</script>
</body>
</html>
